﻿@model List<Models.Customer>
    @{
    Layout = null;
    }

    <!DOCTYPE html>

    <html>

    <head>
        <meta name="viewport" content="width=device-width" />
        <title>客户列表（强类型）</title>
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <script src="~/Scripts/jquery-3.7.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <p></p>
            <div class="card">
                <div class="card-header">
                    添加操作区
                </div>
                <div class="card-body">
                    <form action="/Home/Add" method="post">
                        <div class="input-group flex-nowrap">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">登录ID：</span>
                            <input type="text" name="LoginID" class="form-control" placeholder="登录ID"
                                aria-label="Username" aria-describedby="addon-wrapping">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">密码：</span>
                            <input type="text" name="Pwd" class="form-control" placeholder="密码" aria-label="Username"
                                aria-describedby="addon-wrapping">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">姓名：</span>
                            <input type="text" name="CustomerName" class="form-control" placeholder="姓名"
                                aria-label="Username" aria-describedby="addon-wrapping">
                        </div>
                        <p></p>
                        <div class="input-group flex-nowrap">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">身份证号：</span>
                            <input type="text" name="IdentityID" class="form-control" placeholder="身份证号"
                                aria-label="Username" aria-describedby="addon-wrapping">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">电话：</span>
                            <input type="text" name="Phone" class="form-control" placeholder="电话" aria-label="Username"
                                aria-describedby="addon-wrapping">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">地址：</span>
                            <input type="text" name="Address" class="form-control" placeholder="地址"
                                aria-label="Username" aria-describedby="addon-wrapping">
                        </div>
                        <p></p>
                        <p><input class="btn btn-primary" type="submit" value="添加客户"></p>
                    </form>
                </div>
            </div>
            <p></p>
            <div class="card">
                <div class="card-body">
                    <form action="/Home/Search" method="post">
                        <div class="input-group flex-nowrap">
                            <span style="width: 90px;" class="input-group-text" id="addon-wrapping">姓名：</span>
                            <input type="text" name="name" class="form-control" placeholder="请输入要搜索的姓名"
                                aria-label="Username" aria-describedby="addon-wrapping">
                            <input class="btn btn-primary" type="submit" value="搜索">
                        </div>
                    </form>
                </div>
            </div>
            <p></p>
            <table class="table table-hover">
                <tr>
                    <th>姓名</th>
                    <th>地址</th>
                    <th>电话</th>
                    <th>登录ID</th>
                    <th>操作</th>
                </tr>
                @foreach (var item in Model)
                {
                <tr>
                    <td>@item.CustomerName</td>
                    <td>@item.Address</td>
                    <td>@item.Phone</td>
                    <td>@item.LoginID</td>
                    <td>
                        <a class="btn btn-primary" href="#" onclick="Edit('@item.CustomerID','@item.LoginID','@item.Pwd','@item.CustomerName','@item.IdentityID','@item.Address','@item.Phone')">编辑(弹窗)</a>
                        <a class="btn btn-primary" href="/Home/Edit?cid=@item.CustomerID">编辑</a>
                        <a class="btn btn-danger" href="/Home/Del?cid=@item.CustomerID"
                            onclick="return confirm('您确定要删除 @item.CustomerName ？')">删除</a>
                    </td>
                </tr>
                }
            </table>
        </div>

        <!-- Modal -->
        <form action="/Home/SaveEdit" method="post">
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">编辑客户信息</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body">
                                    <div class="input-group flex-nowrap">
                                        <input type="text" id="CustomerID" name="CustomerID" value="" hidden />
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">登录ID：</span>
                                        <input type="text" id="LoginID" name="LoginID" value="" class="form-control"
                                            placeholder="登录ID" aria-label="Username" aria-describedby="addon-wrapping">
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">密码：</span>
                                        <input type="text" id="Pwd" name="Pwd" value="" class="form-control" placeholder="密码"
                                            aria-label="Username" aria-describedby="addon-wrapping">
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">姓名：</span>
                                        <input type="text" id="CustomerName" name="CustomerName" value="" class="form-control"
                                            placeholder="姓名" aria-label="Username" aria-describedby="addon-wrapping">
                                    </div>
                                    <p></p>
                                    <div class="input-group flex-nowrap">
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">身份证号：</span>
                                        <input type="text" id="IdentityID" name="IdentityID" value="" class="form-control"
                                            placeholder="身份证号" aria-label="Username" aria-describedby="addon-wrapping">
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">电话：</span>
                                        <input type="text" id="Phone" name="Phone" value="" class="form-control" placeholder="电话"
                                            aria-label="Username" aria-describedby="addon-wrapping">
                                        <span style="width: 90px;" class="input-group-text"
                                            id="addon-wrapping">地址：</span>
                                        <input type="text" id="Address" name="Address" value="" class="form-control" placeholder="地址"
                                            aria-label="Username" aria-describedby="addon-wrapping">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    </html>
    <script>
        const myModal = new bootstrap.Modal('#exampleModal', {
            keyboard: false
        })
        //编辑客户信息
        function Edit(CustomerID,LoginID,Pwd,CustomerName,IdentityID,Address,Phone) {
            $('#CustomerID').val(CustomerID);
            $('#LoginID').val(LoginID);
            $('#Pwd').val(Pwd);
            $('#CustomerName').val(CustomerName);
            $('#IdentityID').val(IdentityID);
            $('#Address').val(Address);
            $('#Phone').val(Phone);
            myModal.show();
        }
    </script>